<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>localStorage Demo</title>
</head>
<body>
    <h1>localStorage Example</h1>
    <input type="text" id="input" placeholder="Enter something">
    <button onclick="saveData()">Save to localStorage</button>
    <button onclick="loadData()">Load from localStorage</button>
    <button onclick="clearData()">Clear localStorage</button>
    <!-- 清空所有 -->
     
    <p id="output"></p>

    <script>
        function saveData() {
            const value = document.getElementById('input').value;
            localStorage.setItem('myData', value);
            alert('Data saved!');
        }

        function loadData() {
            const value = localStorage.getItem('myData');
            document.getElementById('output').textContent = value ? `Loaded: ${value}` : 'No data found.';
        }

        function clearData() {
            localStorage.removeItem('myData');
            document.getElementById('output').textContent = '';
            alert('Data cleared!');
        }
    </script>
</body>
</html>